<template>
  <ul>
    <!-- //!#4 用 ref 属性和函数进行绑定，注意要使用 :ref 而不是 ref -->
    <li v-for="item in arr" :key="item" :ref="setDOM">{{ item }}</li>
  </ul>
  <h3>{{ count }}</h3>
  <button @click="handleClick">+1</button>
</template>

<script>
import { onMounted, ref, onBeforeMount, onBeforeUpdate } from 'vue'
// 需求：Vue3 如何获取 v-for 循环的一组元素
export default {
  setup() {
    const count = ref(1)
    const arr = ['a', 'b', 'c']
    // !#1 准备一个空数组
    const arrLi = []
    // !#2 准备一个函数
    const setDOM = (el) => {
      // el => 就是每一个循环的元素，这里就是 li
      // !#5 把 el 装进 arrLi
      arrLi.push(el)
    }
    onMounted(() => {
      arrLi.forEach((item) => (item.style.backgroundColor = 'pink'))
    })

    const handleClick = () => {
      count.value++
      // 问题：arrLi 越来越多
      console.log(arrLi)
    }

    // onBeforeMount 执行时机，只有初始化的时候会走一次，后续更新不会走
    /* onBeforeMount(() => {
      console.log(1)
      arrLi = []
    }) */
    onBeforeUpdate(() => arrLi.splice(0))

    // !#3 导出这个函数
    return { arr, setDOM, count, handleClick }
  },
}
</script>
